<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现课程 | StudyRaid</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --text-primary: #f0f6fc;
            --text-secondary: #c9d1d9;
            --text-tertiary: #8b949e;
            --border-color: #30363d;
            --accent-color: #58a6ff;
            --success-color: #3fb950;
            --warning-color: #d29922;
            --danger-color: #f85149;
            --border-radius: 6px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏样式 */
        header {
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: var(--accent-color);
        }

        .nav-links {
            display: flex;
            gap: 24px;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text-primary);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            padding-left: 32px;
            color: var(--text-primary);
            width: 240px;
            font-size: 14px;
        }

        .search-box i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
        }

        /* 页面标题和筛选器 */
        .page-header {
            margin: 32px 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
        }

        .filters {
            display: flex;
            gap: 12px;
        }

        .filter-btn {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 16px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .filter-btn:hover {
            background-color: var(--bg-tertiary);
            border-color: var(--text-tertiary);
        }

        .filter-btn.active {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        /* 探索页面布局 */
        .explore-container {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 24px;
            margin-bottom: 40px;
        }

        /* 侧边栏筛选器 */
        .filter-sidebar {
            background-color: var(--bg-secondary);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 20px;
            height: fit-content;
            position: sticky;
            top: 90px;
        }

        .filter-section {
            margin-bottom: 24px;
        }

        .filter-section:last-child {
            margin-bottom: 0;
        }

        .filter-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filter-reset {
            color: var(--accent-color);
            font-size: 12px;
            cursor: pointer;
        }

        .filter-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .filter-option input {
            accent-color: var(--accent-color);
        }

        .filter-option label {
            font-size: 14px;
            cursor: pointer;
        }

        .filter-range {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-range input {
            flex: 1;
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px;
            color: var(--text-primary);
        }

        /* 课程网格 */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
        }

        .course-card {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .course-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }

        .course-image {
            height: 160px;
            background-color: var(--bg-tertiary);
            position: relative;
            overflow: hidden;
        }

        .course-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .course-category {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: rgba(13, 17, 23, 0.8);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .course-rating {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(13, 17, 23, 0.8);
            color: var(--warning-color);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .course-content {
            padding: 16px;
        }

        .course-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        .course-instructor {
            color: var(--text-tertiary);
            font-size: 14px;
            margin-bottom: 8px;
        }

        .course-description {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-tertiary);
            font-size: 12px;
            margin-bottom: 16px;
        }

        .course-actions {
            display: flex;
            gap: 8px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            flex: 1;
            text-align: center;
            text-decoration: none;
        }

        .btn-primary {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: #4a93e0;
        }

        .btn-secondary {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background-color: var(--bg-secondary);
        }

        /* 特色课程部分 */
        .featured-courses {
            margin-bottom: 40px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
        }

        .section-action {
            color: var(--accent-color);
            font-size: 14px;
            text-decoration: none;
        }

        .featured-courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        /* 分页控件 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin: 40px 0;
        }

        .pagination-btn {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .pagination-btn:hover:not(:disabled) {
            background-color: var(--bg-tertiary);
            border-color: var(--text-tertiary);
        }

        .pagination-btn.active {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-info {
            color: var(--text-tertiary);
            font-size: 14px;
            margin: 0 16px;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-tertiary);
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 20px;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        /* 页脚 */
        footer {
            border-top: 1px solid var(--border-color);
            padding: 24px 0;
            margin-top: 40px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .explore-container {
                grid-template-columns: 1fr;
            }

            .filter-sidebar {
                position: static;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 16px;
            }

            .nav-links {
                order: 3;
                width: 100%;
                justify-content: center;
            }

            .search-box input {
                width: 200px;
            }

            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .filters {
                flex-wrap: wrap;
            }

            .courses-grid {
                grid-template-columns: 1fr;
            }

            .featured-courses-grid {
                grid-template-columns: 1fr;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">
                    <i class="fas fa-graduation-cap"></i>
                    StudyRaid
                </a>

                <div class="nav-links">
                    <a href="my-courses.html">我的课程</a>
                    <a href="explore.html" class="active">发现</a>
                    <a href="learning-path.html">学习路径</a>
                    <a href="profile.html">个人中心</a>
                </div>

                <div class="user-menu">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索课程..." id="searchInput">
                    </div>
                    <div class="user-avatar">JS</div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container">
        <div class="page-header">
            <h1 class="page-title">发现课程</h1>
            <div class="filters">
                <button class="filter-btn active" data-sort="popular">最受欢迎</button>
                <button class="filter-btn" data-sort="newest">最新发布</button>
                <button class="filter-btn" data-sort="rating">最高评分</button>
                <button class="filter-btn" data-sort="duration">最短时长</button>
            </div>
        </div>

        <!-- 特色课程 -->
        <div class="featured-courses">
            <div class="section-header">
                <h2 class="section-title">精选推荐</h2>
                <a href="#" class="section-action">查看全部</a>
            </div>

            <div class="featured-courses-grid">
                <!-- 推荐课程 1 -->
                <div class="course-card">
                    <div class="course-image">
                        <img src="https://placehold.co/300x160/21262d/8b949e?text=AI+%26+ML" alt="人工智能与机器学习">
                        <div class="course-category">数据科学</div>
                        <div class="course-rating">
                            <i class="fas fa-star"></i> 4.9
                        </div>
                    </div>
                    <div class="course-content">
                        <h3 class="course-title">人工智能与机器学习</h3>
                        <p class="course-instructor">讲师: 李教授</p>
                        <p class="course-description">从零开始学习人工智能和机器学习的基本概念、算法和应用。</p>
                        <div class="course-meta">
                            <span><i class="far fa-clock"></i> 32小时</span>
                            <span><i class="fas fa-signal"></i> 高级</span>
                        </div>
                        <div class="course-actions">
                            <a href="#" class="btn btn-primary">立即学习</a>
                            <button class="btn btn-secondary"><i class="far fa-bookmark"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 推荐课程 2 -->
                <div class="course-card">
                    <div class="course-image">
                        <img src="https://placehold.co/300x160/21262d/8b949e?text=Full+Stack" alt="全栈Web开发">
                        <div class="course-category">全栈开发</div>
                        <div class="course-rating">
                            <i class="fas fa-star"></i> 4.8
                        </div>
                    </div>
                    <div class="course-content">
                        <h3 class="course-title">全栈Web开发</h3>
                        <p class="course-instructor">讲师: 王工程师</p>
                        <p class="course-description">学习前端和后端开发技术，构建完整的Web应用程序。</p>
                        <div class="course-meta">
                            <span><i class="far fa-clock"></i> 45小时</span>
                            <span><i class="fas fa-signal"></i> 中级</span>
                        </div>
                        <div class="course-actions">
                            <a href="#" class="btn btn-primary">立即学习</a>
                            <button class="btn btn-secondary"><i class="far fa-bookmark"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 推荐课程 3 -->
                <div class="course-card">
                    <div class="course-image">
                        <img src="https://placehold.co/300x160/21262d/8b949e?text=Mobile+Dev" alt="移动应用开发">
                        <div class="course-category">移动开发</div>
                        <div class="course-rating">
                            <i class="fas fa-star"></i> 4.7
                        </div>
                    </div>
                    <div class="course-content">
                        <h3 class="course-title">移动应用开发</h3>
                        <p class="course-instructor">讲师: 张架构师</p>
                        <p class="course-description">使用React Native和Flutter开发跨平台移动应用。</p>
                        <div class="course-meta">
                            <span><i class="far fa-clock"></i> 28小时</span>
                            <span><i class="fas fa-signal"></i> 中级</span>
                        </div>
                        <div class="course-actions">
                            <a href="#" class="btn btn-primary">立即学习</a>
                            <button class="btn btn-secondary"><i class="far fa-bookmark"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 推荐课程 4 -->
                <div class="course-card">
                    <div class="course-image">
                        <img src="https://placehold.co/300x160/21262d/8b949e?text=DevOps" alt="DevOps实践">
                        <div class="course-category">DevOps</div>
                        <div class="course-rating">
                            <i class="fas fa-star"></i> 4.9
                        </div>
                    </div>
                    <div class="course-content">
                        <h3 class="course-title">DevOps实践</h3>
                        <p class="course-instructor">讲师: 刘运维</p>
                        <p class="course-description">学习CI/CD、容器化和云原生技术，提升开发效率。</p>
                        <div class="course-meta">
                            <span><i class="far fa-clock"></i> 24小时</span>
                            <span><i class="fas fa-signal"></i> 高级</span>
                        </div>
                        <div class="course-actions">
                            <a href="#" class="btn btn-primary">立即学习</a>
                            <button class="btn btn-secondary"><i class="far fa-bookmark"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 探索页面布局 -->
        <div class="explore-container">
            <!-- 侧边栏筛选器 -->
            <div class="filter-sidebar">
                <div class="filter-section">
                    <div class="filter-title">
                        <span>分类</span>
                        <span class="filter-reset">重置</span>
                    </div>
                    <div class="filter-options">
                        <div class="filter-option">
                            <input type="checkbox" id="category-frontend" checked>
                            <label for="category-frontend">前端开发</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="category-backend" checked>
                            <label for="category-backend">后端开发</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="category-data" checked>
                            <label for="category-data">数据科学</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="category-mobile" checked>
                            <label for="category-mobile">移动开发</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="category-devops" checked>
                            <label for="category-devops">DevOps</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="category-design" checked>
                            <label for="category-design">UI/UX设计</label>
                        </div>
                    </div>
                </div>

                <div class="filter-section">
                    <div class="filter-title">
                        <span>难度级别</span>
                        <span class="filter-reset">重置</span>
                    </div>
                    <div class="filter-options">
                        <div class="filter-option">
                            <input type="checkbox" id="level-beginner" checked>
                            <label for="level-beginner">入门</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="level-intermediate" checked>
                            <label for="level-intermediate">中级</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="level-advanced" checked>
                            <label for="level-advanced">高级</label>
                        </div>
                    </div>
                </div>

                <div class="filter-section">
                    <div class="filter-title">
                        <span>评分</span>
                        <span class="filter-reset">重置</span>
                    </div>
                    <div class="filter-options">
                        <div class="filter-option">
                            <input type="checkbox" id="rating-5" checked>
                            <label for="rating-5">4.5及以上</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="rating-4" checked>
                            <label for="rating-4">4.0及以上</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" id="rating-3" checked>
                            <label for="rating-3">3.5及以上</label>
                        </div>
                    </div>
                </div>

                <div class="filter-section">
                    <div class="filter-title">
                        <span>时长 (小时)</span>
                        <span class="filter-reset">重置</span>
                    </div>
                    <div class="filter-range">
                        <input type="number" placeholder="最小" id="duration-min" value="0">
                        <span>-</span>
                        <input type="number" placeholder="最大" id="duration-max" value="50">
                    </div>
                </div>
            </div>

            <!-- 课程网格 -->
            <div class="courses-grid" id="coursesGrid">
                <!-- 课程卡片将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
            <button class="pagination-btn" id="prevPage" disabled>
                <i class="fas fa-chevron-left"></i> 上一页
            </button>
            <span class="pagination-info" id="pageInfo">第 1 页，共 1 页</span>
            <button class="pagination-btn" id="nextPage" disabled>
                下一页 <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2023 StudyRaid. 保留所有权利。</p>
            <p>采用 GitHub 深色风格设计</p>
        </div>
    </footer>

    <script>
        // 课程数据
        const courses = [
            {
                id: 1,
                title: "JavaScript 高级编程",
                category: "frontend",
                instructor: "李老师",
                description: "深入学习现代JavaScript，包括ES6+特性、异步编程、模块化等高级概念。",
                duration: "12小时",
                level: "中级",
                rating: 4.8,
                students: 1250,
                image: "https://placehold.co/300x160/21262d/8b949e?text=JavaScript"
            },
            {
                id: 2,
                title: "Python 数据分析",
                category: "data",
                instructor: "王教授",
                description: "使用Pandas、NumPy和Matplotlib进行数据清洗、分析和可视化。",
                duration: "18小时",
                level: "中级",
                rating: 4.7,
                students: 980,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Python"
            },
            {
                id: 3,
                title: "Node.js 与 Express",
                category: "backend",
                instructor: "张工程师",
                description: "构建快速、可扩展的Web应用程序和API，使用现代JavaScript技术栈。",
                duration: "15小时",
                level: "中级",
                rating: 4.6,
                students: 1100,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Node.js"
            },
            {
                id: 4,
                title: "Figma 设计入门",
                category: "design",
                instructor: "陈设计师",
                description: "学习使用Figma进行界面设计、原型制作和团队协作。",
                duration: "8小时",
                level: "入门",
                rating: 4.9,
                students: 750,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Figma"
            },
            {
                id: 5,
                title: "Docker 与容器化",
                category: "devops",
                instructor: "刘架构师",
                description: "掌握Docker容器技术，实现应用程序的快速部署和扩展。",
                duration: "10小时",
                level: "中级",
                rating: 4.8,
                students: 890,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Docker"
            },
            {
                id: 6,
                title: "React Native 开发",
                category: "mobile",
                instructor: "赵工程师",
                description: "使用React Native构建跨平台移动应用程序，一次编写，多端运行。",
                duration: "20小时",
                level: "中级",
                rating: 4.7,
                students: 1050,
                image: "https://placehold.co/300x160/21262d/8b949e?text=React+Native"
            },
            {
                id: 7,
                title: "Vue.js 实战开发",
                category: "frontend",
                instructor: "周老师",
                description: "从基础到高级，掌握Vue.js框架及其生态系统。",
                duration: "14小时",
                level: "中级",
                rating: 4.6,
                students: 920,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Vue.js"
            },
            {
                id: 8,
                title: "Spring Boot 企业级开发",
                category: "backend",
                instructor: "吴架构师",
                description: "使用Spring Boot构建企业级Java应用程序。",
                duration: "16小时",
                level: "高级",
                rating: 4.5,
                students: 680,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Spring+Boot"
            },
            {
                id: 9,
                title: "机器学习基础",
                category: "data",
                instructor: "郑教授",
                description: "入门机器学习，了解基本概念和常用算法。",
                duration: "22小时",
                level: "高级",
                rating: 4.8,
                students: 1120,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Machine+Learning"
            },
            {
                id: 10,
                title: "Flutter 应用开发",
                category: "mobile",
                instructor: "孙工程师",
                description: "使用Flutter框架开发高性能的跨平台移动应用。",
                duration: "18小时",
                level: "中级",
                rating: 4.7,
                students: 940,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Flutter"
            },
            {
                id: 11,
                title: "TypeScript 进阶",
                category: "frontend",
                instructor: "钱老师",
                description: "深入学习TypeScript，提升JavaScript开发体验。",
                duration: "10小时",
                level: "中级",
                rating: 4.9,
                students: 780,
                image: "https://placehold.co/300x160/21262d/8b949e?text=TypeScript"
            },
            {
                id: 12,
                title: "数据库设计与优化",
                category: "backend",
                instructor: "冯架构师",
                description: "学习数据库设计原则和性能优化技巧。",
                duration: "12小时",
                level: "高级",
                rating: 4.6,
                students: 650,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Database"
            }
        ];

        // 页面状态
        let currentPage = 1;
        const coursesPerPage = 6;
        let currentSort = 'popular';
        let currentFilters = {
            categories: ['frontend', 'backend', 'data', 'mobile', 'devops', 'design'],
            levels: ['beginner', 'intermediate', 'advanced'],
            minRating: 3.5,
            minDuration: 0,
            maxDuration: 50
        };

        // DOM元素
        const coursesGrid = document.getElementById('coursesGrid');
        const prevPageBtn = document.getElementById('prevPage');
        const nextPageBtn = document.getElementById('nextPage');
        const pageInfo = document.getElementById('pageInfo');
        const searchInput = document.getElementById('searchInput');
        const filterButtons = document.querySelectorAll('.filter-btn');
        const resetButtons = document.querySelectorAll('.filter-reset');

        // 初始化页面
        function initPage() {
            renderCourses();
            setupEventListeners();
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 分页按钮
            prevPageBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    renderCourses();
                }
            });

            nextPageBtn.addEventListener('click', () => {
                const totalPages = Math.ceil(getFilteredCourses().length / coursesPerPage);
                if (currentPage < totalPages) {
                    currentPage++;
                    renderCourses();
                }
            });

            // 排序按钮
            filterButtons.forEach(button => {
                button.addEventListener('click', function () {
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    currentSort = this.dataset.sort;
                    currentPage = 1;
                    renderCourses();
                });
            });

            // 搜索功能
            searchInput.addEventListener('input', function () {
                currentPage = 1;
                renderCourses();
            });

            // 筛选器重置按钮
            resetButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const section = this.closest('.filter-section');
                    resetFilterSection(section);
                });
            });

            // 分类筛选器
            document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    updateFilters();
                    currentPage = 1;
                    renderCourses();
                });
            });

            // 时长筛选器
            document.getElementById('duration-min').addEventListener('change', function () {
                updateFilters();
                currentPage = 1;
                renderCourses();
            });

            document.getElementById('duration-max').addEventListener('change', function () {
                updateFilters();
                currentPage = 1;
                renderCourses();
            });
        }

        // 重置筛选器部分
        function resetFilterSection(section) {
            const checkboxes = section.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = true;
            });

            const inputs = section.querySelectorAll('input[type="number"]');
            inputs.forEach(input => {
                if (input.id === 'duration-min') {
                    input.value = 0;
                } else if (input.id === 'duration-max') {
                    input.value = 50;
                }
            });

            updateFilters();
            currentPage = 1;
            renderCourses();
        }

        // 更新筛选器状态
        function updateFilters() {
            // 更新分类筛选
            currentFilters.categories = [];
            document.querySelectorAll('#category-frontend, #category-backend, #category-data, #category-mobile, #category-devops, #category-design').forEach(checkbox => {
                if (checkbox.checked) {
                    const category = checkbox.id.replace('category-', '');
                    currentFilters.categories.push(category);
                }
            });

            // 更新难度级别筛选
            currentFilters.levels = [];
            document.querySelectorAll('#level-beginner, #level-intermediate, #level-advanced').forEach(checkbox => {
                if (checkbox.checked) {
                    const level = checkbox.id.replace('level-', '');
                    currentFilters.levels.push(level);
                }
            });

            // 更新评分筛选
            currentFilters.minRating = 0;
            if (document.getElementById('rating-5').checked) {
                currentFilters.minRating = Math.max(currentFilters.minRating, 4.5);
            }
            if (document.getElementById('rating-4').checked) {
                currentFilters.minRating = Math.max(currentFilters.minRating, 4.0);
            }
            if (document.getElementById('rating-3').checked) {
                currentFilters.minRating = Math.max(currentFilters.minRating, 3.5);
            }

            // 更新时长筛选
            currentFilters.minDuration = parseInt(document.getElementById('duration-min').value) || 0;
            currentFilters.maxDuration = parseInt(document.getElementById('duration-max').value) || 50;
        }

        // 获取筛选后的课程
        function getFilteredCourses() {
            const searchTerm = searchInput.value.toLowerCase();

            return courses.filter(course => {
                // 搜索匹配
                const matchesSearch = searchTerm === '' ||
                    course.title.toLowerCase().includes(searchTerm) ||
                    course.description.toLowerCase().includes(searchTerm) ||
                    course.instructor.toLowerCase().includes(searchTerm);

                // 分类匹配
                const matchesCategory = currentFilters.categories.includes(course.category);

                // 难度级别匹配
                const levelMap = {
                    '入门': 'beginner',
                    '中级': 'intermediate',
                    '高级': 'advanced'
                };
                const matchesLevel = currentFilters.levels.includes(levelMap[course.level]);

                // 评分匹配
                const matchesRating = course.rating >= currentFilters.minRating;

                // 时长匹配
                const courseDuration = parseInt(course.duration);
                const matchesDuration = courseDuration >= currentFilters.minDuration &&
                    courseDuration <= currentFilters.maxDuration;

                return matchesSearch && matchesCategory && matchesLevel && matchesRating && matchesDuration;
            });
        }

        // 排序课程
        function sortCourses(courses) {
            switch (currentSort) {
                case 'newest':
                    return [...courses].sort((a, b) => b.id - a.id);
                case 'rating':
                    return [...courses].sort((a, b) => b.rating - a.rating);
                case 'duration':
                    return [...courses].sort((a, b) => {
                        const aDuration = parseInt(a.duration);
                        const bDuration = parseInt(b.duration);
                        return aDuration - bDuration;
                    });
                case 'popular':
                default:
                    return [...courses].sort((a, b) => b.students - a.students);
            }
        }

        // 渲染课程
        function renderCourses() {
            const filteredCourses = getFilteredCourses();
            const sortedCourses = sortCourses(filteredCourses);

            // 分页
            const startIndex = (currentPage - 1) * coursesPerPage;
            const endIndex = startIndex + coursesPerPage;
            const coursesToShow = sortedCourses.slice(startIndex, endIndex);

            // 清空课程网格
            coursesGrid.innerHTML = '';

            if (coursesToShow.length === 0) {
                coursesGrid.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-search"></i>
                        <h3>没有找到匹配的课程</h3>
                        <p>尝试调整筛选条件或搜索关键词</p>
                    </div>
                `;
            } else {
                // 渲染课程卡片
                coursesToShow.forEach(course => {
                    const courseCard = document.createElement('div');
                    courseCard.className = 'course-card';
                    courseCard.innerHTML = `
                        <div class="course-image">
                            <img src="${course.image}" alt="${course.title}">
                            <div class="course-category">${getCategoryName(course.category)}</div>
                            <div class="course-rating">
                                <i class="fas fa-star"></i> ${course.rating}
                            </div>
                        </div>
                        <div class="course-content">
                            <h3 class="course-title">${course.title}</h3>
                            <p class="course-instructor">讲师: ${course.instructor}</p>
                            <p class="course-description">${course.description}</p>
                            <div class="course-meta">
                                <span><i class="far fa-clock"></i> ${course.duration}</span>
                                <span><i class="fas fa-signal"></i> ${course.level}</span>
                            </div>
                            <div class="course-actions">
                                <a href="#" class="btn btn-primary">立即学习</a>
                                <button class="btn btn-secondary"><i class="far fa-bookmark"></i></button>
                            </div>
                        </div>
                    `;
                    coursesGrid.appendChild(courseCard);
                });
            }

            // 更新分页控件
            updatePagination(filteredCourses.length);
        }

        // 获取分类名称
        function getCategoryName(category) {
            const categoryMap = {
                'frontend': '前端开发',
                'backend': '后端开发',
                'data': '数据科学',
                'mobile': '移动开发',
                'devops': 'DevOps',
                'design': 'UI/UX设计'
            };
            return categoryMap[category] || category;
        }

        // 更新分页控件
        function updatePagination(totalCourses) {
            const totalPages = Math.ceil(totalCourses / coursesPerPage);

            prevPageBtn.disabled = currentPage <= 1;
            nextPageBtn.disabled = currentPage >= totalPages;

            pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages || 1} 页`;
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>

</html>